<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1920,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>播放控制条</title>
<style>
body {
    background: transparent;
    width: 1920px;
    height: 1080px;
    overflow: hidden;   
}
.dr {
    border: solid 1px red;
}
.bottombar {
    position: absolute;
    top: 900px;
    left: 0px;
    width: 1920px;
    height: 180px;
    overflow: hidden;
    background-color: black;
    opacity: 0.5;
    font-size: 30px;
    color: white;
}

.seekbar {
    position: relative;
    margin: 5px 60px;
    color: white;
    width: 1800px;
    padding-top: 5px;
    overflow: hidden;
}
.seekbar span {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    font-size: 30px;
}
.playtime  {
    width: 150px;
    text-align: right;
}
.endtime {
    width: 120px;
    text-align: left;
}
.seekbarbg {
    width: 1500px;
    height: 30px;
    margin-top: 10px;
    border-top: solid 5px white;
}

.seekbarpointer {
    position: absolute;
    width: 24px;
    height: 24px;
    margin-top: -15px;
    background-color: #999;
    border-radius: 15px;
    overflow: hidden;
}

.btns {
    text-align: center;
    position: relative;
}

.btns span{
    position: absolute;
    display: block;
    left: 150px;
}

.btns div {
    display: inline-block;
}

.btns div a {
    display: inline-block;
    width: 120px;
    height: 70px;
    overflow: hidden;
}

a:focus {
    outline: none;
    text-decoration: none;
}
a:link {
    outline: none;
    text-decoration: none;    
}

.btns a:focus , .btns a.currentFocus {
}

.btns a:hover img, .btns a:focus img , .btns a.currentFocus img {
    border: solid 1px #bbb;
    background-color: #bbb;
}

.btns a img {
    vertical-align: middle;
    padding: 5px 20px;
    border: solid 1px transparent;
}

</style>

</head>
<body class="" >
    <div id="bottombar" class="bottombar" >
        <div class="seekbar">
            <span id="playtime" class=" playtime" > &nbsp; </span>
            <span id="seekbar" class=" seekbarbg">
                <div id="seekpointer" class=" seekbarpointer"> </div>
            </span>
            <span id="duration" class=" endtime" > &nbsp; </span> 
        </div>
        <div class="btns">
            <span id="playtitle">  Loading...  </span>
            <div>
	            <a 
	                onfocus="document.getElementById('btnprev').src='btnimage/btnprevh.png';"
	                onblur="document.getElementById('btnprev').src='btnimage/btnprev.png';"
	                href="javascript:;" onclick="prev();" ><img id="btnprev" src="btnimage/btnprev.png"/></a>
	            <a  id="btnfirst" 
	                onfocus="document.getElementById('btnplay').src='btnimage/btnplayh.png';"
	                onblur="document.getElementById('btnplay').src='btnimage/btnplay.png';"
	                href="javascript:;" onclick="playpause();"><img id="btnplay" src="btnimage/btnplay.png"/></a>
	            <a 
	            	onfocus="document.getElementById('btnnext').src='btnimage/btnnexth.png';"
	            	onblur="document.getElementById('btnnext').src='btnimage/btnnext.png';"
	                href="javascript:;" onclick="next();"><img id="btnnext" src="btnimage/btnnext.png"/></a>
            </div>
            

        </div>
    </div>
</body>
</html>

<script type="text/javascript">

function formatTime(ms) {
    if ( ms < 0 ) return "00:00";

    var s = Math.floor(parseInt(ms)/1000) % 60;
    if( s < 10 ) s = "0" + s ;
    else s = "" + s;

    var m = Math.floor(parseInt(ms)/1000/60 ) %60;
    if( m<10 ) m = "0" + m;
    else m = "" + m;

    var h = Math.floor(parseInt(ms)/1000/60/60 ) %24;
    if( h == 0 ) return m + ":" + s;

    return h+":"+m+":"+s; 
}

var eventobj = null;
var mainwin = null;

var title = "";

var e_bottombar = document.getElementById("bottombar");
var e_duration = document.getElementById("duration");
var e_playtime = document.getElementById("playtime");
var e_seekbar = document.getElementById("seekbar");
var e_seekpointer = document.getElementById("seekpointer");
var maxwidth = e_seekbar.offsetWidth - e_seekpointer.offsetWidth;
var oleft = e_seekbar.offsetLeft;
var duration;
var playtime;
var in_seek = false;
var epsoideInfo = null;

function uni_onready(){
    var uiSettings = wae.create("UI.UISettings");
    uiSettings.set1080P();

    // eventobj = wae.create("RawKey");
    // console.log("video player hold all key!")
    // eventobj.onKeyEvent = function( a ) {
    //     if( a.arguments[0] == 4 ) {
    //         var fwin = wae.create("UI.WaePopupWebView");
    //         fwin.removeWebView("controller");
    //         console.log("close player ! ");
    //     }
    // }
    // eventobj.add(4);
    // eventobj.add_default_key();

    //rawkeyobj = wae.create("RawKey");
    // rawkeyobj.add_default_key();

    mainwin = wae.create("WAE.WindowMessager");
    mainwin.setName( "controller" );
    mainwin.onUpdate = function(e) {
        if ( in_seek ) return;
        //console.log("on update ...")
        try {
            eval("var info = " + e.arguments );
            duration = info.duration;
            playtime = info.playtime;

            e_duration.innerHTML = formatTime ( duration );
            e_playtime.innerHTML = formatTime ( playtime );

            var left = Math.floor( playtime * maxwidth / duration ) + oleft;
            e_seekpointer.style.left = left + "px";
        }catch(e){}
    }
    mainwin.onCompletion = function() {
                // eventobj.holdKey( false );
        console.log("playover hide player send mesg ... ");
        mainwin.sendMessage("main", "hide", "" );         
    }

    mainwin.onSetTitle = function( p ) {
        // alert( JSON.stringify(p) );
        title = p.arguments[0];
        console.log("set the title!");
        document.getElementById("playtitle").innerHTML = "Loading : " + title;        
    }

    mainwin.onBuffer = function( p ) {
        var rate = p.arguments[0];
        if ( isNaN(rate) || rate == 100 ) {
        	console.log("");
            document.getElementById("playtitle").innerHTML = title ;
        } else {
        	var speedstr = "";
			if( ! mainwin.speedobj ) {
				mainwin.speedobj = wae.create("Net.NetSpeed");
				mainwin.speedobj.setTotalMode( true );
				mainwin.speedobj.resetSpeed();			
			} else {
				var s = mainwin.speedobj.getDownloadSpeed();
				console.log("getDownloadSpeed : " + s );
				s = Math.floor( s * 8 * 10 )/10;
				if ( s > 1000 ) {
					speedstr = ( Math.floor(s/100)/10 ) + "mbps";
				} else {
					speedstr = (s)  + "kbps";
				}
			}
        
        	if ( !! speedstr )
            document.getElementById("playtitle").innerHTML = title + " [" + speedstr + "]"; 
            else
            document.getElementById("playtitle").innerHTML = title ;
            //showBar();
        }
    }

    mainwin.onStartplay = function(playinfostr) {
        console.log("onStartplay")
        var playinfo = JSON.parse( playinfostr.arguments[0] ); // JSON.parse( playinfostr );
        if ( ! playinfo ) return;

		//alert( playinfo );
		//document.getElementById("playtitle").innerHTML = epsoideInfo.title;
    }

    hotKey.init();
}


function playpause() {
    console.log("playpause: " + hasShow() );
    if ( hasShow() == false ) return;
    // console.log("before send playpause ....");
    mainwin.sendMessage("main", "playpause", "" );
}

function stop() {
    console.log("stop: " + hasShow() );
    if ( hasShow() == false ) return;
    // console.log("before send playpause ....");
    mainwin.sendMessage("main", "stop", "" );
}

function play() {
    console.log("play: " + hasShow() );
    if ( hasShow() == false ) return;
    // console.log("before send playpause ....");
    mainwin.sendMessage("main", "play", "" );
}

function pause() {
    console.log("pause: " + hasShow() );
    if ( hasShow() == false ) return;
    // console.log("before send playpause ....");
    mainwin.sendMessage("main", "pause", "" );
}

function seek( ms ) {
    console.log("seek: " + hasShow() );
    if ( hasShow() == false ) return;
    //console.log("seek to " + ms);
    //if ( hasShow() == false ) return;
    console.log("seek to " + ms);
    mainwin.sendMessage("main", "seek", ms );
}

var seektimer = null;
var s_playtime = -1;
var interval = -1;

function next() {
    console.log("next ::::: " + hasShow() );
    if ( hasShow() == false ) return;
    in_seek = true;

	if ( interval == -1 ) {
		interval = duration / 100;
		if ( interval < 10 ) interval = 10;
		if ( interval > 60 ) interval = 60;
	}

    mainwin.sendMessage("main", "pause", "" );

    if( s_playtime == -1 ) s_playtime = playtime;
    s_playtime = s_playtime + interval*1000;
    if ( s_playtime  + interval * 1000 > duration ) {
        s_playtime = duration - interval * 1000 ; 
    }
    if( s_playtime < 0 ) {
        s_playtime = 0;
    }
    
    var left = Math.floor( s_playtime * maxwidth / duration ) + e_seekbar.offsetLeft;
    e_seekpointer.style.left = left + "px";

    if( !!seektimer ) clearTimeout( seektimer );
    seektimer = setTimeout(function(){
        in_seek = false;
        seek( s_playtime );
        s_playtime = -1;
    }, 1000 * 3);
}
function prev() {

	if ( interval == -1 ) {
		interval = duration / 100;
		if ( interval < 10 ) interval = 10;
		if ( interval > 60 ) interval = 60;
	}

    console.log("prev: " + hasShow() );
    if ( hasShow() == false ) return;
    in_seek = true;
    mainwin.sendMessage("main", "pause", "" );
    if( s_playtime == -1 ) s_playtime = playtime;
    s_playtime = s_playtime - interval *1000;
    if ( s_playtime  + interval * 1000 > duration ) {
        s_playtime = duration - interval * 1000 ; 
    }
    if( s_playtime < 0 ) {
        s_playtime = 0;
    }
    var left = Math.floor( s_playtime * maxwidth / duration ) + e_seekbar.offsetLeft;
    e_seekpointer.style.left = left + "px";

    if( !!seektimer ) clearTimeout( seektimer );
    seektimer = setTimeout(function(){
        in_seek = false;
        seek( s_playtime );
        s_playtime = -1;
    }, 1000 * 3);
}

window.onWAEReady = uni_onready;  

</script>
    
<script type="text/javascript" src="./js/key.js"></script>
<script type="text/javascript">

var hidden_timer = null;
var hidden_ms = 1000 * 10;

function hideBar() {
    console.log("hideBar ... ");
    if( !!hidden_timer ) clearTimeout( hidden_timer );
    if ( e_bottombar == null ) return;
    e_bottombar.style.display = "none";
}
function resetShowBar() {
    if( !!hidden_timer ) clearTimeout( hidden_timer );
    hidden_timer = setTimeout( hideBar, hidden_ms );    
}
var isShowingBar = false;
function showBar() {
    if( !!hidden_timer ) clearTimeout( hidden_timer );
    if ( e_bottombar == null ) return;

    hidden_timer = setTimeout( hideBar, hidden_ms );
    e_bottombar.style.display = "block";
    isShowingBar = true;
    setTimeout( function() {
        VatataKeyMove.initById("btnfirst");
    }, 100 );
    setTimeout( function() {
        isShowingBar = false;
    }, 500 );
}
function hasShow() {
    if ( e_bottombar.style.display == "block" ) {
        if ( isShowingBar == false )
            return true;  
    } 
    return false;
}

// hideBar();
    // document.getElementById("bkimg").style.display = "none";

showBar();

document.body.onclick = function() {
    showBar();
}

document.onkeydown = function(e) {
    //console.log("onkeydown: " + e.keyCode );
    if ( hasShow() == false ) {
        setTimeout(showBar, 100 );
        return;
    } else {
        resetShowBar();
    }

    switch( e.keyCode ) {
         case 83:
         setTimeout(hideBar, 100 );
        //     console.log("get comm for next");
        //     mainwin.sendMessage("main", "next", "" );
         break;
        // case 87:
        //     console.log("get comm for prev");
        //     mainwin.sendMessage("main", "prev", "" );
        // break;
        // case 65:
        //     prev();
        //     break;
        // case 68:
        //     next();
        //     break;
        // case 70:
        //     playpause();
        //     break;
    }
}



  const SYS_KEY_PLAY = 85;
  const SYS_KEY_STOP = 86;


  const SYS_KEY_RED = 131;
  const SYS_KEY_YELLOW = 133;
  const SYS_KEY_GREEN = 132;

  const SYS_KEY_NEXT = 90;
  const SYS_KEY_PREV = 89;

  const SYS_KEY_PAUSE = 139;

  const SYS_KEY_BACK = 4;
  const SYS_KEY_ESC = 111;
  function hotKey() {
  }

  hotKey.init = function() {
    var eventListener = wae.create("EventListener");
    eventListener.addJs( SYS_KEY_PLAY,   "hotKey.play();" );
    eventListener.addJs( SYS_KEY_PAUSE,   "hotKey.pause();" );
    eventListener.addJs( SYS_KEY_STOP ,       "hotKey.stop();");
    eventListener.addJs( SYS_KEY_GREEN,       "hotKey.next();" );
    eventListener.addJs( SYS_KEY_RED,      "hotKey.red();" );
    eventListener.addJs( SYS_KEY_NEXT,        "hotKey.next()" );
    eventListener.addJs( SYS_KEY_PREV,        "hotKey.prev()" );

    eventListener.addJs( SYS_KEY_BACK,        "hotKey.exit()" );
    eventListener.addJs( SYS_KEY_ESC,        "hotKey.exit()" );

    hotKey.toast = wae.create("Toast");
  }
  hotKey.exit = function() {
    if ( !! hotKey.backcount && hotKey.backcount > 0 ) {
        // hotKey.stop();
        var app = wae.create("Application");
        app.finishActivity();
        return;
    }
    if ( ! hotKey.backcount ) hotKey.backcount = 1;
    else hotKey.backcount ++;

    console.log("Press back again to exit");
    hotKey.toast.setEnable(true);
    hotKey.toast.showMessage("Press back again to stop playing!");
    setTimeout( function(){
        hotKey.backcount = 0;
    }, 1000 *5 );
  }
  hotKey.play = function() {
    showBar();
    playpause();
  }
  hotKey.pause = function() {
    showBar();
    pause();
  }

  hotKey.playpause = function() {
    showBar();
    playpause();
  }
  hotKey.stop = function() {
    showBar();
    stop();
  }
  hotKey.next = function() {
    showBar();
    next();
  }
  hotKey.prev = function() {
    showBar();
    prev();
  }
  hotKey.red = function() {
    hideBar();
  }
  hotKey.screendn = function() {
  }


</script>
